<!DOCTYPE html>
<!--
   Flowplayer JavaScript, website, forums & jQuery Tools by Tero Piirainen
   Prefer web standards over Flash. Video is the only exception (for now).
-->
<html lang="en"><head>
    <title>Slide effect</title>
    <meta name="description" content="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
">
    <meta name="keywords" content="javascript ui library, javascript library, jquery ui library, user interface library, web 2.0 ui library
">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Distribution" content="Global">
    <meta name="author" content="Tero Piirainen">
    <meta name="Robots" content="index,follow">

    <link rel="shortcut icon" href="http://jquerytools.org/media/img/favicon.ico">
        <link rel="stylesheet" href="testSlide_files/style.css">
        

<link rel="stylesheet" type="text/css" href="testSlide_files/docs.css">
<link rel="stylesheet" type="text/css" href="testSlide_files/syntax.css">
<style>
    /* trigger button */
  #download_now {
    background:transparent url(testSlide_files/downloadnow.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin: 0 auto;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
  }

  /* mouseover state */
  #download_now:hover {
    background-position:0 -44px;
  }

  /* clicked state */
  #download_now:focus {
    background-position:0 -88px;
  } 

  #bk_download_now {
    background:transparent url(testSlide_files/downloadnow.png) no-repeat scroll 0 0;
    display:block;
    height:44px;
    margin: 0 auto;
    margin-bottom:30px;
    overflow:hidden;
    text-indent:-999em;
    width:159px;
    cursor:pointer;
  }

  /* mouseover state */
  #download_now:hover {
    background-position:0 -44px;
  }

  /* clicked state */
  #download_now:focus {
    background-position:0 -88px;
  }

  /* tooltip styling */
  .tooltip {
    display:none;
    background:url(testSlide_files/black_arrow_big.png);
    height:163px;
    padding:40px 30px 10px 30px;
    width:310px;
    font-size:11px;
    color:#fff;
  }

  /* a .label element inside tooltip */
  .tooltip .label {
    color:yellow;
    width:35px;
  }

  .tooltip a {
    color:#ad4;
    font-size:11px;
    font-weight:bold;
  }
  </style>

        <script src="testSlide_files/ga.js" async="" type="text/javascript"></script><script src="testSlide_files/jquery.js"></script>
          </head>
  <body>
    <div id="top">
        <div id="top-wrap">
          <div id="noticeHolder">
            <div id="notice">
              This is a message.
            </div>
            <div id="closeNotice"></div>
          </div>
            <ul>
                <li class="spacer left"></li>
                <li>
                    <a id="top-fp" href="http://flowplayer.org/">Flowplayer</a>
                </li>
                <li>
                    <a id="top-jt" href="http://jquerytools.org/" class="active">jQuery Tools</a>
                </li>
                <li class="spacer right"></li>
            </ul>
            <form id="top-search" action="/search.html">
                <input placeholder="Search site" name="q" type="text">
            </form>
        </div>
    </div>

    <div id="wrap">

      <div id="nav" class="clear">
            <ul>
                <li>
                    <a href="http://jquerytools.org/">Home</a>
                </li>
                <li>
                    <a href="http://jquerytools.org/demos">Demos</a>
                </li>
                <li class="active">
                    <a href="http://jquerytools.org/documentation">Documentation</a>
                </li>
                <li>
                    <a href="http://jquerytools.org/forum/tools">Forums</a>
                </li>
                <li id="download">
                    <a href="http://jquerytools.org/download">Download</a>
                </li>
            </ul>
        </div>

      <div id="content">
        <img id="hero" src="testSlide_files/tooltips.jpg">
<div class="blurb">
<h1 class="teaser title">Slide&nbsp;effect</h1>

<p class="teaser text">
  Impress your mom with a tooltip that slides and fades. Up, down,
  left or right.
</p>


<div class="box">
<!-- trigger element. a regular workable link -->
<a id="download_now">Download now</a>
<a id="bk_download_now">Download now</a>

<!-- tooltip element -->
<div style="position: absolute; top: 175.5px; left: 309.017px; opacity: 0; display: none;" class="tooltip">

  <img src="testSlide_files/eye.png" alt="Flying screens" style="float:left; margin:0 15px 20px 0">

  <table style="margin:0">
    <tbody><tr>
      <td class="label">File</td>
      <td>flowplayer-3.2.9.zip</td>
    </tr>
    <tr>
      <td class="label">Version</td>
      <td>2012-03-29</td>
    </tr>
    <tr>
      <td class="label">Size</td>
      <td>112 kB</td>
    </tr>
    <tr>
      <td class="label">OS</td>
      <td>all</td>
    </tr>
  </tbody></table>

  <a href="http://jquerytools.org/release-notes">What's new in 3.2</a>
</div>

<!-- tooltip element -->
<div style="position: absolute; top: 175.5px; left: 309.017px; opacity: 0; display: none;" class="tooltip">

  <img src="testSlide_files/eye.png" alt="Flying screens" style="float:left; margin:0 15px 20px 0">

  <table style="margin:0">
    <tbody><tr>
      <td class="label">File</td>
      <td>flowplayer-3.2.9.zip</td>
    </tr>
    <tr>
      <td class="label">Version</td>
      <td>2012-03-29</td>
    </tr>
    <tr>
      <td class="label">Size</td>
      <td>112 kB</td>
    </tr>
    <tr>
      <td class="label">OS</td>
      <td>all</td>
    </tr>
  </tbody></table>

  <a href="http://jquerytools.org/release-notes">What's new in 3.2</a>
</div>

<script>
  $(document).ready(function() {
      $("#download_now").tooltip({ effect: 'slide'});
      $("#bk_download_now").tooltip({ effect: 'slide'});
    });
</script>


</div>
<a class="standalone" href="http://jquerytools.org/demos/tooltip/any-html.htm">standalone demo</a>

</div>


<p>
  Here you can see the JavaScript setup for the above example:
</p>

<div class="codebox"><figure class="code"><div class="highlight"><pre>    <span class="nx">$</span><span class="p">(</span><span class="s2">"#download_now"</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span> <span class="nx">effect</span><span class="o">:</span> <span class="s1">'slide'</span><span class="p">});</span><br>  <br></pre></div><br><figcaption>JavaScript</figcaption></figure></div>


<a name="slide_configuration"></a>
<h2>Configuration options</h2>

<p>
  Here is a full list of available configuration options for this
  effect. These options are in addition to tooltip's
  standard <a href="http://jquerytools.org/documentation/tooltip/index.html#configuration">options</a>.
</p>

<a name="slide_configuration"></a>
<div class="table">
<table class="listing">

  <thead>
    <tr>
      <th>property</th>
      <th>default</th>
      <th>description</th>
    </tr>
  </thead>
  <tbody><tr>
    <td class="code">bounce</td>
    <td><code>false</code></td>
    <td>
      <strong>Since 1.1.0.</strong> By default, when the tooltip
      slides away the sliding continues in the same direction as when
      the tooltip was shown. By setting this to <samp>true</samp> the
      tooltip slides back to its original position.
    </td>
  </tr>
  <tr>
    <td class="code">direction</td>
    <td><code>up</code></td>
    <td>
      <strong>Since 1.1.0.</strong> specifies the sliding
      direction. Valid values
      are <samp>up</samp>, <samp>down</samp>, <samp>left</samp>
      and <samp>right</samp>.
    </td>
  </tr>
  <tr>
    <td class="code">slideOffset</td>
    <td class="code">10</td>
    <td>Specifies the position where the tooltip will slide in
    relation to the trigger element. A positive value means farther
    upwards and a negative value will cause it to slide farther
    downwards.</td>
  </tr>
  <tr>
    <td class="code">slideInSpeed</td>
    <td class="code">200</td>
    <td>The sliding speed when the tooltip is shown, in milliseconds</td>
  </tr>
  <tr>
    <td class="code">slideOutSpeed</td>
    <td class="code">200</td>
    <td>The sliding speed when the tooltip is hidden, in milliseconds</td>
  </tr>
  <tr>
    <td class="code">slideFade</td>
    <td class="code">!$.browser.msie</td>
    <td>
      Specifies whether sliding is combined with fade-in/fade-out
      effects. By default this effect is enabled for all browsers
      except for Internet Explorer. This is because many times the
      tooltip has a PNG24 background image and IE does not support
      opacity changes for PNG24 images. If you want to enable fading
      for all browsers you can simply set this property
      to <samp>true</samp>. You can read more about PNG24 images in
      the <a href="http://jquerytools.org/documentation/basics.html#png2424">User's
      Manual</a>.
    </td>
  </tr>
</tbody></table>
</div>

<p>
  <strong>Note:</strong> this effect uses a fading animation from zero
  to full opacity in all browsers other than Internet Explorer.
</p>

<h2>Example</h2>

<p>
  An example setup using the <samp>slide</samp> effect with the custom
  property <samp>slideOffset</samp>:
</p>

<div class="codebox"><figure class="code"><div class="highlight"><pre><span class="nx">$</span><span class="p">(</span><span class="s2">"a.withTooltip"</span><span class="p">).</span><span class="nx">tooltip</span><span class="p">({</span><br>  <span class="nx">effect</span><span class="o">:</span> <span class="s1">'slide'</span><span class="p">,</span><br>  <span class="nx">slideOffset</span><span class="o">:</span> <span class="mi">30</span><br><span class="p">});</span><br></pre></div><br><figcaption>JavaScript</figcaption></figure></div>



      </div>
            <div id="right">
        <nav class="sidebar">

<div class="sect one" id="sect0">
    <header>
        <div class="icon"></div>
        <h2 class="first">User&nbsp;Guide</h2>
    </header>
    <ol class="cat">
        <li>
        <ol class="links">
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/index.html">
        Introduction to jQuery&nbsp;tools</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/basics.html">
        jQuery tools&nbsp;basics</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/scripting.html">
        jQuery tools scripting <span class="amp">&amp;</span>&nbsp;events</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/performance.html">
        jQuery tools&nbsp;performance</a>
    </li>
                </ol>
    </li>
        </ol>
</div><div class="sect two" id="sect1">
    <header class="open">
        <div class="icon"></div>
        <h2><span class="caps">UI</span>&nbsp;Tools</h2>
    </header>
    <ol class="cat active">
                        <li>
            <ol class="links">
                <h3 title="">Tabs</h3>
                    <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/tabs/index.html">
        Tab tool&nbsp;basics</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/tabs/slideshow.html">
        Slideshow&nbsp;plugin</a>
    </li>
            </ol>
        </li>
                        <li>
            <ol class="links">
                <h3 title="">Tooltips</h3>
                    <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/tooltip/index.html">
        Tooltip&nbsp;basics</a>
    </li><li>
    <a class="active" title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/tooltip/slide.html">
        Slide&nbsp;effect</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/tooltip/dynamic.html">
        Dynamic&nbsp;tooltips</a>
    </li>
            </ol>
        </li>
                        <li>
            <ol class="links">
                <h3 title="">Overlay</h3>
                    <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/overlay/index.html">
        Overlay</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/overlay/apple.html">
        Apple&nbsp;Effect</a>
    </li>
            </ol>
        </li>
                        <li>
            <ol class="links">
                <h3 title="">Scrollable</h3>
                    <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/scrollable/index.html">
        Scrollable&nbsp;basics</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/scrollable/navigator.html">
        Navigator&nbsp;plugin</a>
    </li><li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/scrollable/autoscroll.html">
        Scrollable&nbsp;autoscrolling</a>
    </li>
            </ol>
        </li>
                </ol>
</div><div class="sect three" id="sect2">
    <header>
        <div class="icon"></div>
        <h2>Form&nbsp;Tools</h2>
    </header>
    <ol class="cat">
        <li>
        <ol class="links">
            
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/validator/index.html">
        Validator</a>
    </li>
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/rangeinput/index.html">
        Rangeinput</a>
    </li>
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/dateinput/index.html">
        Dateinput</a>
    </li>
                </ol>
    </li>
        </ol>
</div><div class="sect one" id="sect3">
    <header>
        <div class="icon"></div>
        <h2>Toolbox</h2>
    </header>
    <ol class="cat">
        <li>
        <ol class="links">
            
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/toolbox/expose.html">
        Expose</a>
    </li>
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/toolbox/flashembed.html">
        Flashembed</a>
    </li>
            
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/toolbox/history.html">
        History</a>
    </li>
            <li>
    <a title="A collection of the most important user-interface components for todays websites. This single JavaScript file weighs only 5.8 Kb
" href="http://jquerytools.org/documentation/toolbox/mousewheel.html">
        Mousewheel</a>
    </li>
                </ol>
    </li>
        </ol>
</div></nav>
        <ul class="more_info">
          <li>
            <a href="https://github.com/jquerytools/jquerytools/issues">
              report a bug »</a>
          </li>
          <li>
            <a href="http://jquerytools.org/release-notes/index.html">
	             <img src="testSlide_files/banner-small.jpg" alt="Introducing jQuery Tools 1.2">
            </a>
          </li>
          <li>
            <a href="http://jquerytools.org/release-notes/version-1.2.x.html">
            What's new in v1.2.7 » </a>
          </li>
        </ul>
        <div class="jqt_book">
          <h3>Read the book</h3>
          <p>
            The new jQuery Tools book by Alex Libby explores the library in a
            precise and structured fashion. If you are getting started on jQuery Tools or
            looking for better ways to use the library, this book will be your ally.
          </p>
          <a href="http://www.amazon.com/exec/obidos/ASIN/1849517800/">
            <img src="testSlide_files/1849517800.jpg" alt="Book Cover">
          </a>
        </div>
      </div>
      
    </div>
    <div id="bottom-wrap">
      <div id="footer">
          <div id="footerlinks">
            <a href="http://twitter.com/jquerytools">Twitter feed</a>
            <span class="sep">|</span>
            github:&nbsp;<a href="https://github.com/jquerytools/jquerytools">tools</a>
            <span class="slash">/</span><a href="https://github.com/jquerytools/site">website</a>
            <span class="sep">|</span>
            <a href="https://github.com/jquerytools/jquerytools/issues">report a bug</a>
          </div>
      </div>
    </div>

    
    <script>
    // toggle category
    $("#right header").click(function() {
        $(this).toggleClass("open");
        $(this).next(".cat").toggleClass("active");
    });
    </script>
    <script>
                  var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-5877901-1']);
      _gaq.push(['_trackPageview']);

      (function() {
          var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
          ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
        </script>

  
</body></html>